<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymelef.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>腾讯视频</title>
</head>
<style>
    body{
        background-color: #f5f5f5;
        margin: 0;
        padding: 0;
    /*    网页内容居中*/
        text-align: center;
    }
    .right{
        display: inline-block;
        margin-right: 20px;
        margin-top: 20px;
    /*    右对齐*/
        text-align: right;


    }
/*    去掉 ul，li的样式*/
    ul,li{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    .content{
    /*    div平分页面大小*/
        width: 100%;
        height: 100%;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        margin-top: 20px;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        padding: 20px;

    }
    .content-list{
    /*    左右平分页面大小*/
        width: 50%;
        height: 100%;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        margin-top: 20px;
        border: 1px solid #ccc;
        padding: 20px;
    }
</style>
<body>
<h1>电影首页</h1>

<hr/>

<div sec:authorize="isAnonymous()">
    <h2 align="center">
        游客您好，如果您想看电影，<a th:href="@{/userLogin}">请登录</a>
    </h2>
</div>
<div sec:authorize="isAuthenticated()">
    <h2 align="center">
        <span sec:authentication="name" style="color: #007bff">
        </span>
        用户您好！您的权限为
        <span sec:authentication="principal.authorities"></span>,您能查看以下电影
    </h2>
    <!--    登出-->
    <form th:action="@{/mylogout}" method="post" class="right">
        <input th:type="submit" th:value="退出登录">
    </form>
</div>

<div class="content" sec:authorize="hasRole('common')or hasRole('vip')">
    <h3>普通电影</h3>
    <ul>
        <div class="content-list">
            <li>
                <a th:href="@{/movie/common/1}">电影1</a>
            </li>
        </div>
        <div class="content-list">
            <li>
                <a th:href="@{/movie/common/2}">电影2</a>
            </li>
        </div>
    </ul>
</div>

<div class="content" sec:authorize="hasRole('vip')">
    <h3>VIP电影</h3>
    <ul>
        <li>
            <a th:href="@{/movie/vip/3}">电影3</a>
        </li>
        <li>
            <a th:href="@{/movie/vip/4}">电影4</a>
        </li>
    </ul>
</div>

</body>
</html>